<template>
  <div>
    <div class="cbody">
      <!-- <div class="top">
          <div :class="dayChange == 0 ? 'hac' : ''" @click="setDays(0)">全部</div>
          <div :class="dayChange == 1 ? 'hac' : ''" @click="setDays(1)">今日</div>
          <div :class="dayChange == 2 ? 'hac' : ''" @click="setDays(2)">近7天</div>
          <div :class="dayChange == 3 ? 'hac' : ''" @click="setDays(3)">近30天</div>
      </div>-->
      <div class="tx">
        <div class="tx-btn" @click="goCash()">提现</div>
      </div>
      <div class="info">
        <div class="head">
          <div>
            <div class="name">总收入</div>
            <div class="count">¥ {{finInfo.selectAllPrice.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">冻结金额</div>
            <div class="count">¥ {{finInfo.frozenPrice.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">账户余额</div>
            <div class="count">¥ {{finInfo.balance.toFixed(2)}}</div>
          </div>
          <div>
            <div class="name">已提现金额</div>
            <div class="count">¥ {{finInfo.tiPrice.toFixed(2)}}</div>
          </div>
        </div>
      </div>
      <div class="screen">财务明细</div>
      <!-- <div class="sel">
            <span>名称：</span>
            <input type="text" placeholder="服务商名称/合伙人" v-model="params.keyWord">
            <span>当前状态：</span>
            <select name  v-model="params.states">
              <option value="">请选择</option>
              <option value="0">待审核 </option>
              <option value="1">审核通过未打款 </option>
              <option value="2">审核通过已打款 </option>
              <option value="3">审核失败</option>
            </select>
            <div class="sel-btn">查询</div>
          </div>
          <div class="tabs">
            <div class="tabac">合伙人</div>
            <div @click="error()">服务商</div>
      </div>-->
      <div class="change">
        <div :class="aChange == 0 ? 'aced' : ''" @click="tabs(0)">收入</div>
        <div :class="aChange == 1 ? 'aced' : ''" @click="tabs(1)">提现</div>
      </div>
      <div class="table" v-if="aChange == 0">
        <div class="thead">
          <div class="ac">活动名称</div>
          <div class="sj">活动报名金额</div>
          <div class="fc">分成比例</div>
          <div class="pt">平台佣金</div>
          <div class="je">分成金额</div>
          <!-- <div class="time">时间</div> -->
        </div>
        <div class="tbody" v-for="(item,index) in finList" :key="index">
          <div class="ac">{{item.activity_title}}</div>
          <div class="sj">{{item.bao_price.toFixed(2)}}</div>
          <div class="fc">{{item.percentage}}%</div>
          <div class="pt">{{item.ping_price.toFixed(2)}}</div>
          <div class="je">{{item.fen_price.toFixed(2)}}</div>
          <!-- <div class="time">{{setDate(item.settlement_time)+' '+setTime(item.settlement_time)}}</div> -->
        </div>
      </div>
      <div class="table" v-else>
        <div class="thead txhead">
          <div>金额</div>
          <div class="sqtime">申请时间</div>
          <div>状态</div>
        </div>
        <div class="tbody txhead" v-for="(item,index) in txList" :key="index">
          <div>{{item.price}}</div>
          <div class="sqtime">{{setDate(item.time)+' '+setTime(item.time)}}</div>
          <div v-if="item.states == 0">待审核</div>
          <div v-if="item.states == 1">审核通过未打款</div>
          <div v-if="item.states == 2">审核通过已打款</div>
          <div v-if="item.states == 3">审核失败</div>
        </div>
      </div>
    </div>

    <div class="clear"></div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.limit"
      :total="params.total"
      style="text-align:center;margin:20px auto;"
      layout="total,prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        keyWord: "",
        states: 0,
        limit: 10,
        page: 1,
        total: 0,
        type: 2,
        serviceId: this.$store.state.userId
      },
      finInfo: {},
      finList: [],
      txList: [],
      aChange: 0
    };
  },
  methods: {
    /**
     * 分页
     */
    handleCurrentChange: function(index) {
      let that = this;
      that.params.total = index;
      that.getFinList();
      that.getFinTx();
    },
    /**
     * 提现
     */
    goCash: function() {
      this.$router.push({
        path: "/main/initiation"
      });
    },
    /**
     * 切换
     */
    tabs: function(num) {
      this.aChange = num;
      if (num == 0) {
        this.getFinList();
      } else {
        this.getFinTx();
      }
    },
    /**
     * 审核
     */
    examine: function(id, num) {
      let that = this;
      axios({
        method: "post",
        url: `/tWithdrawal/updateStates`,
        data: qs.stringify({
          id: id,
          states: num
        })
      })
        .then(res => {
          if (res.data.code == 0) {
            that.getFinList();
          } else {
            this.$alert(res.data.msg);
          }
        })
    },

    /**
     * 查询提现统计 withdrawal/selectByPartnerId
     */
    getFinTx: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `/withdrawal/selectByServiceId`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          if (res.data.code == 0) {
            that.txList = res.data.data.records;
            that.params.total = res.data.count;
          } else {
            that.$alert(res.data.msg);
          }
        })
    },
    /**
     *  查询财务统计
     */
    getFinDetail: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `/withdrawal/selectCaiTong`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            that.finInfo = res.data.data;
          } else {
            that.$alert(res.data.msg);
          }
        })
    },
    /**
     *  查询财务列表
     */
    getFinList: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `withdrawal/selectIncomeList`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            that.finList = res.data.data;
            that.params.total = res.data.count;
          } else {
            that.$alert(res.data.msg);  
          }
        })
    },
    /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth()+1) : times.getMonth()+1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getFinList();
    this.getFinDetail();
  }
};
</script>
<style scoped>
.clear {
  clear: both;
}
.txian {
  background: #085dab;
  width: 200px;
  height: 50px;
  font-size: 18px;
  color: #ffffff;
  margin: 45px auto;
  text-align: center;
  line-height: 50px;
}
.txhead {
  display: flex !important;
}
.txhead > div {
  flex: 1;
}
.txhead .sqtime {
  flex: 2;
}
.change {
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 34px;
}
.change > div {
  float: left;
  width: 70px;
  margin-left: 10px;
  text-align: center;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  line-height: 67px;
  cursor: pointer;
}
.change > div :last-of-type {
  margin-left: 100px;
}
.change .aced {
  border-bottom: 3px solid #085dab;
  box-sizing: border-box;
}
.screen {
  /* width: 1600px; */
  height: 60px;
  background: #f6f6f6;
  line-height: 60px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000;
  margin-top: 30px;
  margin-bottom: 26px;
  padding-left: 28px;
  box-sizing: border-box;
  font-weight: bold;
}
.screen img {
  float: left;
  width: 27px;
  height: 27px;
  margin-left: 10px;
  margin-top: 16px;
  margin-right: 18px;
}
.tx {
  height: 50px;
  /* width: 1520px; */
  position: absolute;
  right: 122px;
  top: 249px;
  z-index: 1;
}
.tx-btn {
  background: #085dab;
  width: 200px;
  height: 50px;
  float: right;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.sel {
  height: 40px;
  line-height: 40px;
  /* width: 1520px; */
}
.sel > span {
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  float: left;
}
.sel > span:last-of-type {
  margin-left: 106px;
}
.sel > input {
  background: #ffffff;
  border: 1px solid #979797;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 38px;
  font-size: 18px;
  color: #888888;
  text-align: center;
  float: left;
  outline: none;
}
.sel > select {
  background: #ffffff;
  border: 1px solid #979797;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 38px;
  font-size: 18px;
  color: #888888;
  text-align: center;
  float: left;
  outline: none;
  padding-left: 70px;
}
.sel-btn {
  background: #085dab;
  border: 1px solid #085dab;
  width: 140px;
  height: 38px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  float: left;
  margin-left: 50px;
  cursor: pointer;
}

.cbody {
  /* float: left; */
  position: relative;
}
.info {
  /* width: 1600px; */
  height: 140px;
  background: #f6f6f6;
  margin-left: 4px;
}
.top {
  margin-top: 7px;
  height: 40px;
  height: 40px;
  text-align: center;
  width: 440px;
  color: #1875f0;
  border: 2px solid #1875f0;
  border-radius: 4px;
  display: flex;
  margin-bottom: 38px;
  margin-left: 476px;
}
.top > div {
  flex: 1;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-left: 2px solid #1875f0;
  font-weight: bold;
  cursor: pointer;
}
.top :first-child {
  border: 0;
}
.top .hac {
  background: #1875f0;
  color: #fff;
}
.head {
  display: flex;
  /* width: 1520px; */
  margin-top: 28px;
}
.head > div {
  flex: 1;
  border-left: 1px solid #fff;
  box-sizing: border-box;
  height: 140px;
  background: #f6f6f6;
}
.head :first-child {
  border-left: 0px solid #fff;
  box-sizing: border-box;
}
.name {
  font-size: 18px;
  color: #000000;
  height: 24px;
  text-align: center;
  margin-top: 23px;
  margin-bottom: 27px;
  font-weight: bold;
}
.count {
  height: 50px;
  font-size: 36px;
  color: #085dab;
  text-align: center;
  line-height: 50px;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
.tabs .tabac {
  background: #e0eefe;
}
.thead {
  background: #e0eefe;
  border: 1px solid #dddddd;
  /* width: 1600px; */
  height: 67px;
  line-height: 67px;
  display: flex;
}
.thead > div {
  flex: 1;
  height: 67px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.tbody {
  /* width: 1600px; */
  display: inline-block;
  overflow: hidden;
  height: 106px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin-top: -2px;
  display: flex;
}
.tbody > div {
  flex: 1;
  text-align: center;
  line-height: 106px;
  height: 106px;
}
</style>


